<template>
  <view class="help-page" :style="my_style">
    <u-collapse :item-style="itemStyle">
      <u-collapse-item
        :title="item.class_name"
        v-for="(item, index) in list"
        :key="index"
        :open="item.open"
        :disabled="item.disabled"
      >
        <view
          class="collapse-item flex-between"
          v-for="(val, idx) in item.child_list"
          :key="idx"
          @click="jump(`/views/user/article?type=help&id=${val.id}`)"
        >
          {{ val.title }}
          <u-icon name="arrow-right" color="#999"></u-icon>
        </view>
      </u-collapse-item>
    </u-collapse>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        list: [],
        itemStyle: {
          background: '#fff',
          padding: '0 24rpx',
        },
      }
    },
    onLoad(options) {
      this.getHelpList()
    },
    methods: {
      async getHelpList() {
        const res = await this.$api.common.system('getHelpList')
        if (res.code === 200) {
          this.list = res.data
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  .help-page {
    .collapse-item {
      padding: 30rpx 0;
      font-size: 32rpx;
      line-height: 40rpx;
      color: #333;
    }
  }
</style>
